<template>
  <view class="page">
    <view class="todayProfile">
      <text class="text">今日收益(元)</text>
      <text class="number" :class="profileData.today_profile >= 0 ?'red':'green'">{{profileData.today_profile || '-'}}</text>
      <text class="number" :class="profileData.today_profile >= 0 ?'red':'green'">
        {{(profileData.today_profile_rt*100).toFixed(2) || '-'}}%
      </text>
    </view>
    <view class="allArea">
      <view class="total-price">
        <text class="item text">总市值</text>
         <text class="item">{{profileData.total_price || '-'}}</text>
      </view>
      <view class="total-profile">
        <text class="item text">总盈亏</text>
         <text class="item" :class="profileData.total_profile >= 0 ?'red':'green'">
           {{profileData.total_profile || '-'}}
         </text>
      </view>
      <view class="total-profile-rate">
        <text class="item rate" v-if="profileData.total_profile !== 0" :class="profileData.total_profile >= 0 ?'red':'green'">
          {{totalProfileRate || '-'}}%
        </text>
      </view>
    </view>
    
  </view>
</template>

<script>
  
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapActions } = createNamespacedHelpers('stock')
  
  export default {
    computed: {
      ...mapState(['profileData']),
      totalProfileRate () {
        return (this.profileData.total_profile / (this.profileData.total_price - this.profileData.total_profile) * 100).toFixed(2)
      }
    },
    
    methods: {
      ...mapActions(['getProfileDataReq'])
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    width: 690rpx;
    margin: 30rpx auto;
    padding: 30rpx 0;
    box-shadow: 0 0 10rpx #333;
    border-radius: 10rpx;
  }
  
  .todayProfile {
    display: flex;
    justify-content: space-around;
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    overflow: hidden;
  }
  .number {
    font-size: 30rpx;
  }
  .text {
    font-size: 30rpx;
  }
  
  .allArea {
    width: 690rpx;
    margin-top: 30rpx;
    display: flex;
    justify-content: space-around;
  }
  .item {
    margin-right: 10rpx;
    font-size: 30rpx;
  }
  .green {
    color: green;
  }
  .red {
    color: red;
  }
  .rate {
    font-size: 30rpx;
  }
</style>
